<script setup>
import {ref, onMounted, nextTick, computed, watch} from 'vue';
import FirstPage from "@/views/Reader/components/firstPage.vue";
import {useRouter, useRoute} from 'vue-router';
import AsideBar from "@/views/Reader/components/asideBar/asideBar.vue";
import {useScroll} from '@vueuse/core';
import {ArrowLeft, ArrowRight, Edit, Share} from '@element-plus/icons-vue';
import {formatTime} from '@/utils/calTime.js';
import Annotation from "@/views/Reader/components/asideAnnotation.vue";
import {ElMessage, radioButtonProps} from 'element-plus';
import {getBookInformation} from '@/apis/bookInformation';
import {getChapterContent} from '@/apis/getChapterContent';
import {getCurrentInstance} from 'vue';
import {addHighLight, deleteHighLights} from '@/apis/highLight';
import {addAnnotationApi, deleteAnnotationApi} from '@/apis/annotation';
import message from '@/components/message.vue';
import {getAvatar} from '@/apis/getAvatar';

const {proxy} = getCurrentInstance();
const highlightList = ref([]);
const hightObject = ref({});
const annotationList = ref([]);
const bookInfo = ref();
const chapterContent = ref()
const highLightList = ref([]);
const {y} = useScroll(window);
const annotationHeight = ref(0);
const bodyText = ref("");
const highlightedText = ref(bodyText.value);
const highlightColor = ref('#ffff00');
let lastRange = null;
let startCharIndex = null;
let endCharIndex = null;
const selectedAnnotationContent = ref(''); // 定义选中的批注内容
let annotationId = 0; // 全局唯一标识符计数器
const setting = ref({
  selectedColor: 'white',
  isDay: true,
  fontSize: 20,
  selectedFontKind: 'KaiTi',
  pageWidth: '800px',
  readType: '默认',
});
const getBookInformationApi = async () => {
  bookInfo.value = await getBookInformation(route.params.bookId);
  console.log(bookInfo.value);

  const res = await getChapterContent(route.params.id, route.params.chapterID);
  console.log(res)
}
const props = defineProps({
  annotationId: {
    type: Number,
    required: true,
  }
});
const storeSelectionRange = async () => {
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    lastRange = selection.getRangeAt(0);
    const startContainer = lastRange.startContainer;
    const endContainer = lastRange.endContainer;

    // 确保选择内容在 .body 内的 .bodyText 中
    const bodyElement = document.querySelector('.body');
    const bodyTextElement = document.querySelector('.bodyText');
    if (!bodyElement.contains(startContainer) || !bodyElement.contains(endContainer) ||
        !bodyTextElement.contains(startContainer) || !bodyTextElement.contains(endContainer)) {
      lastRange = null; // 重置 lastRange
      return;
    }

    // 计算相对于整个文本的绝对位置
    startCharIndex = getCharIndex(bodyText.value, startContainer, lastRange.startOffset);
    endCharIndex = getCharIndex(bodyText.value, endContainer, lastRange.endOffset);

    console.log(`Selected text starts at character ${startCharIndex} and ends at character ${endCharIndex}`);
    // const temp = bookInfo.value.chapter.find(chapter => chapter.chapter_index === Number(route.params.chapterID));
    // await addHighLight(route.params.id, temp.id, startCharIndex, endCharIndex, highlightColor.value,proxy);
    // window.location.reload();
  }
};

const getCharIndex = (text, container, offset) => {
  let charIndex = 0;
  const treeWalker = document.createTreeWalker(document.querySelector('.bodyText'), NodeFilter.SHOW_TEXT, null, false);
  let currentNode;
  while (currentNode = treeWalker.nextNode()) {
    if (currentNode === container) {
      charIndex += offset;
      break;
    } else {
      charIndex += currentNode.textContent.length;
    }
  }
  return charIndex;
};

const updateHighlightColor = (value) => {
  highlightColor.value = value;
};

const highlightSelection = async () => {
  if (!lastRange) {
    ElMessage.error('请选择正文内容');
    return;
  }
  const selection = window.getSelection();
  if (selection.rangeCount > 0) {
    lastRange = selection.getRangeAt(0);
    const startContainer = lastRange.startContainer;
    const endContainer = lastRange.endContainer;

    // 确保选择内容在 .body 内的 .bodyText 中
    const bodyElement = document.querySelector('.body');
    const bodyTextElement = document.querySelector('.bodyText');
    if (!bodyElement.contains(startContainer) || !bodyElement.contains(endContainer) ||
        !bodyTextElement.contains(startContainer) || !bodyTextElement.contains(endContainer)) {
      lastRange = null; // 重置 lastRange
      return;
    }

    // 计算相对于整个文本的绝对位置
    startCharIndex = getCharIndex(bodyText.value, startContainer, lastRange.startOffset);
    endCharIndex = getCharIndex(bodyText.value, endContainer, lastRange.endOffset);
    console.log(`Selected text starts at character ${startCharIndex} and ends at character ${endCharIndex}`);
    const temp = bookInfo.value.chapter.find(chapter => chapter.chapter_index === Number(route.params.chapterID));
    await addHighLight(route.params.id, temp.id, startCharIndex, endCharIndex, highlightColor.value, proxy);
    window.location.reload();
    console.log(`Selected text starts at character ${startCharIndex} and ends at character ${endCharIndex}`);
  }
};

const removeSelectedHighlight = async () => {
  if (!lastRange) return;

  const selection = window.getSelection();
  if (selection.rangeCount === 0) return;

  const selectedRange = selection.getRangeAt(0);

  const highlightedElements = document.querySelectorAll('.bodyText .highlight');

  highlightedElements.forEach(async (element) => {
    const elementRange = document.createRange();
    elementRange.selectNodeContents(element);

    if (selectedRange.intersectsNode(element)) {
      const startOffset = Math.max(0, selectedRange.startOffset - elementRange.startOffset);
      const endOffset = Math.min(element.textContent.length, selectedRange.endOffset - elementRange.posstartOffset);
      for (let i = 0; i < highLightList.value.length; i++) {
        if (highLightList.value[i].start_pos === startCharIndex && highLightList.value[i].end_pos === endCharIndex) {
          console.log(highLightList.value[i].id)
          const res = await deleteHighLights(highLightList.value[i].id, proxy);
        }
      }
      window.location.reload();
      const beforeSelection = element.textContent.slice(0, startOffset);
      const selectedText = element.textContent.slice(startOffset, endOffset);
      const afterSelection = element.textContent.slice(endOffset);

      const fragment = document.createDocumentFragment();

      if (beforeSelection) {
        const newSpanBefore = document.createElement('span');
        newSpanBefore.textContent = beforeSelection;
        newSpanBefore.className = 'highlight';
        fragment.appendChild(newSpanBefore);
      }

      const textNode = document.createTextNode(selectedText);
      fragment.appendChild(textNode);

      if (afterSelection) {
        const newSpanAfter = document.createElement('span');
        newSpanAfter.textContent = afterSelection;
        newSpanAfter.className = 'highlight';
        fragment.appendChild(newSpanAfter);
      }

      element.replaceWith(fragment);
    }
  });

  // 更新 highlightedText 以反映新的 HTML 内容
  highlightedText.value = document.querySelector('.bodyText').innerHTML;

  // 清除选区
  window.getSelection().removeAllRanges();
  lastRange = null;
};

const removeHighlights = async () => {
  for (let i = 0; i < highLightList.value.length; i++) {
    await deleteHighLights(highLightList.value[i].id, proxy);
  }
  window.location.reload();
  window.scrollTo(0, 0);
  const highlightedElements = document.querySelectorAll('.bodyText .highlight');
  highlightedElements.forEach((element) => {
    const parent = element.parentNode;
    while (element.firstChild) {
      parent.insertBefore(element.firstChild, element);
    }
    parent.removeChild(element);
  });

  highlightedText.value = document.querySelector('.bodyText').innerHTML;
};
const info = ref({
  'id': 6,
  'name': 'wcb164',
  'time': '',
  'imgUrl': '',
  'content': ''
});
const isMessageVisible = ref(false)
const addAnnotation = async () => {
  isMessageVisible.value = true;
  info.value.content = content.value;
  info.value.time = formatTime(new Date());
  info.value.imgUrl = await getAvatar(proxy);
  console.log(info.value)

  console.log('addAnnotation is called');

  if (!lastRange) return;

  const span = document.createElement('span');
  span.className = 'annotation';
  span.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
  span.style.borderBottom = '2px solid red';
  span.setAttribute('data-annotation-id', annotationId); // 添加唯一标识符
  annotationId++;
  const selectionContents = lastRange.extractContents();
  span.appendChild(selectionContents);

  // 添加前后竖线
  const startLine = document.createElement('span');
  startLine.className = 'annotation-line';
  startLine.style.borderLeft = '2px solid red';
  startLine.style.height = '100%';
  const endLine = document.createElement('span');
  endLine.className = 'annotation-line';
  endLine.style.borderLeft = '2px solid red';
  endLine.style.height = '100%';

  lastRange.insertNode(endLine);
  lastRange.insertNode(span);
  lastRange.insertNode(startLine);

  highlightedText.value = document.querySelector('.bodyText').innerHTML;

  window.getSelection().removeAllRanges();
  lastRange = null;

  console.log(showAnnotation.value);
  console.log(bookInfo.value.chapter, route.params.chapterID)
  const temp = bookInfo.value.chapter.find(chapter => chapter.chapter_index === Number(route.params.chapterID));
  console.log(route.params.id, temp, startCharIndex, endCharIndex, selectedAnnotationContent.value, proxy)
  console.log(temp.id)
  console.log(bodyText.value.slice(startCharIndex, endCharIndex))
  const a = bodyText.value.slice(startCharIndex, endCharIndex)
  console.log(proxy)
  await addAnnotationApi(route.params.id, temp.id, startCharIndex, endCharIndex, a, type, proxy);
  ElMessage.success('批注添加成功');
};
watch(isMessageVisible, (newVal, oldVal) => {
  console.log(`First name changed from ${oldVal} to ${newVal}`);
  if (newVal === false) {
    info.value.content = content.value;
    console.log(info.value)
  }
});
const addAnnotationClick = (event) => {
  const target = event.target;
  if (target.classList.contains('annotation')) {
    const annotationId = target.getAttribute('data-annotation-id');
    const allAnnotations = document.querySelectorAll('.annotation');
    const annotationIndex = Array.from(allAnnotations).findIndex(annotation => annotation.getAttribute('data-annotation-id') === annotationId);

    console.log(`Clicked annotation ID: ${annotationId}, Index: ${annotationIndex + 1}`);
    showAnnotation.value = true;
    currentAnnotationId.value = parseInt(annotationId, 10) + 1;

    allAnnotations.forEach(annotation => {
      if (annotation.getAttribute('data-annotation-id') === annotationId) {
        annotation.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
      }
    });
  }
};

const closeAnnotation = () => {
  showAnnotation.value = false;
};
const currentAnnotationId = ref();
const currentChapter = ref({})

// const contentHeight = ref(0);
const getBookInfo = async () => {
  const bookId = route.params.id;
  bookInfo.value = await getBookInformation(bookId, proxy);

  chapterContent.value = await getChapterContent(route.params.id, route.params.chapterID, proxy);
  console.log(chapterContent.value)

  highLightList.value = chapterContent.value.highlight;
  console.log(highLightList)

  annotationList.value = chapterContent.annotation;
  console.log(annotationList.value)

  bodyText.value = chapterContent.value.content;
  highlightedText.value = chapterContent.value.content;

  currentChapter.value = bookInfo.value.chapter?.find(chapter => chapter.chapter_index === Number(route.params.chapterID));
  // console.log('文本内容',bodyText.value)
  // currentChapter.value = chapterContent.value.value.chapters?.find(chapter => chapter.chapter_id === Number(route.params.chapterID));
}
const renderAnnotation = (start, end) => {
  const range = document.createRange();
  const bodyTextElement = document.querySelector('.bodyText');
  const treeWalker = document.createTreeWalker(bodyTextElement, NodeFilter.SHOW_TEXT, null, false);
  let charCount = 0;
  let node;
  let startNode, startOffset, endNode, endOffset;

  while ((node = treeWalker.nextNode())) {
    const nodeLength = node.length;
    if (charCount + nodeLength >= start && !startNode) {
      startNode = node;
      startOffset = start - charCount;
    }
    if (charCount + nodeLength >= end && !endNode) {
      endNode = node;
      endOffset = end - charCount;
      break;
    }
    charCount += nodeLength;
  }

  if (startNode && endNode) {
    range.setStart(startNode, startOffset);
    range.setEnd(endNode, endOffset);
    const span = document.createElement('span');
    span.className = 'annotation';
    span.style.backgroundColor = 'rgba(255, 0, 0, 0.1)';
    span.style.borderBottom = '2px solid red';
    span.setAttribute('data-annotation-id', annotationId);
    annotationId++;

    range.surroundContents(span);

    highlightedText.value = bodyTextElement.innerHTML;
  }
};

const temp = async () => {
  window.scrollTo(0, 0);
  await getBookInfo()
  console.log(bookInfo.value)
  // renderAnnotation(306, 316)
  // renderAnnotation(326, 336)
  // renderAnnotation(346, 354)
  // renderAnnotation(366, 376)
  // renderAnnotation(396, 406)
  console.log("content temp is called")
  nextTick(() => {
    const contentElement = document.querySelector('.body');
    const firstPageElement = document.querySelector('.firstPage');
    const annotationElement = document.querySelector('.Annotation');
    if (contentElement && annotationElement) {
      contentHeight.value = contentElement.offsetHeight;
      if (Number(route.params.chapterID) === 1) {
        console.log(annotationTop.value)
        annotationTop.value += firstPageElement.offsetTop;
        annotationElement.style.top += `${firstPageElement.offsetTop}px`;
      }
      annotationElement.style.height = `${contentHeight}px`;
      annotationTop.value += contentElement.offsetTop;
      annotationElement.style.top = `${annotationTop.value + 150}px`;
      console.log(annotationTop.value)
      console.log(annotationElement.style.top)
    }
  });
  console.log(bookInfo.value)
  currentChapter.value = bookInfo.value.chapter?.find(chapter => chapter.chapter_index === Number(route.params.chapterID));
  highlightedText.value = bodyText.value;
  console.log(highlightText.value)
}
onMounted(async () => {
  await getBookInfo()
  renderAnnotation(306, 316)
  renderAnnotation(326, 336)
  renderAnnotation(346, 354)
  renderAnnotation(366, 376)
  renderAnnotation(396, 406)
  console.log("content onMounted is called")
  console.log(highLightList.value)
  for (let i = 0; i < highLightList.value.length; i++) {
    console.log(highLightList.value[i].start_pos, highLightList.value[i].end_pos, highLightList.value[i].color)
    highlightText(highLightList.value[i].start_pos, highLightList.value[i].end_pos, highLightList.value[i].color)
  }
  nextTick(() => {
    const contentElement = document.querySelector('.body');
    const firstPageElement = document.querySelector('.firstPage');
    const annotationElement = document.querySelector('.Annotation');
    if (contentElement && annotationElement) {
      // contentHeight.value = contentElement.offsetHeight;
      if (Number(route.params.chapterID) === 1) {
        console.log(annotationTop.value)
        annotationTop.value += firstPageElement.offsetTop;
        annotationElement.style.top += `${firstPageElement.offsetTop + 1000}px`;
      }
      // annotationElement.style.height = `${contentHeight + 300}px`;
      // annotationTop.value += contentElement.offsetTop;
      // annotationElement.style.top = `${annotationTop.value}px`;
      console.log(annotationTop.value)
      console.log(annotationElement.style.top)
    }
  });
  console.log(bookInfo.value)
  currentChapter.value = bookInfo.value.chapter?.find(chapter => chapter.chapter_index === Number(route.params.chapterID));
  highlightedText.value = bodyText.value;
  console.log(highlightText.value)
  console.log(currentChapter.value)
});
const handleSaveSettings = (settings) => {
  console.log('Saved content settings: ', settings);
  emit('saveSettings', settings);
  setting.value = settings;
};
const annotationTop = ref(0);
const router = useRouter();
const route = useRoute();
const emit = defineEmits('updateIsDay');
const isDay = ref(true);
const showAnnotation = ref(true);
const getIsDay = (value) => {
  console.log(value.value);
  isDay.value = value.value;
};
const updateShowAnnotation = (value) => {
  console.log(value.value)
  showAnnotation.value = value
}
const handleAnnotationClick = (event) => {
  const target = event.target;
  if (target.classList.contains('annotation')) {
    const annotationId = target.getAttribute('data-annotation-id');
    const allAnnotations = document.querySelectorAll('.annotation');
    const annotationIndex = Array.from(allAnnotations).findIndex(annotation => annotation.getAttribute('data-annotation-id') === annotationId);
    console.log(showAnnotation.value)
    console.log(`Clicked annotation ID: ${annotationId}, Index: ${annotationIndex + 1}`);
    showAnnotation.value = true;
    currentAnnotationId.value = parseInt(annotationId, 10) + 1;

    // 获取选中的批注内容并更新侧边栏
    selectedAnnotationContent.value = target.innerHTML;

    allAnnotations.forEach(annotation => {
      if (annotation.getAttribute('data-annotation-id') === annotationId) {
        annotation.style.backgroundColor = 'rgba(255, 0, 0, 0.1)'; // 设置背景颜色
      }
    });
  }
  console.log(showAnnotation.value)
};
const time = formatTime(new Date(2024, 5, 31, 10, 3, 1));
const chapterID = ref()
const goLast = async () => {
  chapterID.value = Number(route.params.chapterID);
  if (Number(chapterID.value) === 1) {
    ElMessage.error('已经是第一章了');
    return;
  }
  chapterID.value--;
  router.push(`/reader/${route.params.id}/${chapterID.value}`);
  // 根据路由信息重新获取章节内容
  await temp();
  window.scrollTo(0, 0);
};

const goNext = async () => {
  chapterID.value = Number(route.params.chapterID);
  console.log(bookInfo.value.chapter.length)
  console.log(chapterID.value)
  if (Number(chapterID.value) === bookInfo.value.chapter.length) {
    ElMessage.error('已经是最后一章了');
    return;
  }
  chapterID.value++;
  console.log(chapterID.value)
  console.log(`/reader/${route.params.id}/${chapterID.value}`);
  router.push(`/reader/${route.params.id}/${chapterID.value}`);
  await temp()
  window.scrollTo(0, 0);
};
const type = ref('私有')
const updata = (value) => {
  if (value === 1) {
    type.value = '私有'
  } else {
    type.value = '公开'
  }
}
// const highlightText = (start, end, color) => {
//   const range = document.createRange();
//   const bodyTextElement = document.querySelector('.bodyText');
//   const treeWalker = document.createTreeWalker(bodyTextElement, NodeFilter.SHOW_TEXT, null, false);
//   let charCount = 0;
//   let node;
//   let startNode, startOffset, endNode, endOffset;

//   while ((node = treeWalker.nextNode())) {
//     const nodeLength = node.length;
//     if (charCount + nodeLength >= start && !startNode) {
//       startNode = node;
//       startOffset = start - charCount;
//     }
//     if (charCount + nodeLength >= end && !endNode) {
//       endNode = node;
//       endOffset = end - charCount;
//       break;
//     }
//     charCount += nodeLength;
//   }

//   if (startNode && endNode) {
//     range.setStart(startNode, startOffset);
//     range.setEnd(endNode, endOffset);
//     const span = document.createElement('span');
//     span.className = 'highlight';
//     span.style.backgroundColor = color;
//     range.surroundContents(span);

//     highlightedText.value = bodyTextElement.innerHTML;
//   }
// };
const highlightText = (start, end, color) => {
  const range = document.createRange();
  const bodyTextElement = document.querySelector('.bodyText');
  const treeWalker = document.createTreeWalker(bodyTextElement, NodeFilter.SHOW_TEXT, null, false);
  let charCount = 0;
  let node;
  let startNode, startOffset, endNode, endOffset;

  while ((node = treeWalker.nextNode())) {
    const nodeLength = node.length;
    if (charCount + nodeLength >= start && !startNode) {
      startNode = node;
      startOffset = start - charCount;
    }
    if (charCount + nodeLength >= end && !endNode) {
      endNode = node;
      endOffset = end - charCount;
      break;
    }
    charCount += nodeLength;
  }

  if (startNode && endNode) {
    range.setStart(startNode, startOffset);
    range.setEnd(endNode, endOffset);

    // Ensure the range does not partially select non-Text nodes
    if (range.commonAncestorContainer.nodeType !== Node.TEXT_NODE) {
      const commonAncestor = range.commonAncestorContainer;
      if (commonAncestor.nodeType === Node.ELEMENT_NODE) {
        let startContainer = range.startContainer;
        let endContainer = range.endContainer;

        while (startContainer !== commonAncestor && startContainer.nodeType !== Node.TEXT_NODE) {
          range.setStartBefore(startContainer);
          startContainer = range.startContainer;
        }

        while (endContainer !== commonAncestor && endContainer.nodeType !== Node.TEXT_NODE) {
          range.setEndAfter(endContainer);
          endContainer = range.endContainer;
        }
      }
    }

    const span = document.createElement('span');
    span.className = 'highlight';
    span.style.backgroundColor = color;

    try {
      range.surroundContents(span);
    } catch (e) {
      console.error('Failed to surround contents:', e);
    }

    highlightedText.value = bodyTextElement.innerHTML;
  }
};

const content = ref()
</script>

<template>
  <div>
    <Message v-model:visible="isMessageVisible" title="添加批注信息" content="您确定要添加批注吗？" confirm="确定"
             cancel="取消">
      <el-input v-model="content" placeholder="请输入批注内容"></el-input>
    </Message>
  </div>
  <div class="mainn">
    <div @mouseup="storeSelectionRange" :class="{ left: showAnnotation === false }">
      <div class="whole" :class="{ centered: !showAnnotation }" @click="handleAnnotationClick" v-if="highlightText">
        <Annotation @updateShowAnnotation="updateShowAnnotation" @closeAnnotation="closeAnnotation" class="Annotation"
                    :style="{ height: contentHeight + 'px', backgroundColor: setting.selectedColor }"
                    :annotationId="currentAnnotationId" v-if="showAnnotation === true" @updata="updata"
                    :info="info">
        </Annotation>
        <div class="contentBox" :class="{ centered: !showAnnotation, shifted: showAnnotation, }">
          <div class="firstPage" :class="{ centered: !showAnnotation }">
            <FirstPage class="firstPage" :color="setting.selectedColor"></FirstPage>
          </div>
          <div class="content" :class="{ centered: !showAnnotation }">
            <div class="title">
              <div class="nameTitle">
                <p class="nameTitle"> {{ currentChapter ? currentChapter.title : 'dsvdsv' }}</p>
              </div>
              <div class="informationTitle">
                <!-- <div class="authorInformation">
                  <p class="word">作者:</p>
                  <p v-if="bookInfo.author">{{ bookInfo.author.author_name }}</p>
                </div> -->
                <div class="wordInformation">
                  <p class="word">本章字数:</p>
                  <p>{{ currentChapter ? currentChapter.word_count : "sdvds" }}</p>
                </div>
                <!--
                <div class="updateTime">
                  <p class="word">更新时间:</p>
                  <p>{{ currentChapter ? currentChapter.time_modified : 'sdvdsv' }}</p>
                </div>
                -->
              </div>
            </div>
            <div>
              <el-divider></el-divider>
            </div>
            <div class="body" @click="handleAnnotationClick">
              <span class="bodyText"
                    :style="{ fontFamily: setting.selectedFontKind, fontSize: setting.fontSize + 'px', whiteSpace: 'pre-wrap' }"
                    v-if="highlightText" v-html="highlightedText"></span>
            </div>
            <div>
              <el-divider></el-divider>
            </div>
            <div class="button">
              <el-button type="danger" round size="large">捧场</el-button>
            </div>
            <div class="code"><i class="iconfont icon-erweima"></i>
              <p style="margin-bottom: 20px">扫一扫，手机接着读</p>
            </div>
          </div>
          <div class="button-group" :class="{ centered: !showAnnotation }">
            <el-button-group>
              <el-button type="default" :icon="ArrowLeft" style="border: none;" @click="goLast">上一章</el-button>
              <el-button type=" default" style="border: none;" @click="goNext"> 下一章
                <el-icon class="el-icon--right">
                  <ArrowRight/>
                </el-icon>
              </el-button>
            </el-button-group>
            <el-button-group class="ml-4">
              <el-button type="default" :icon="Edit" style="border: none;"/>
              <el-button type="default" :icon="Share" style="border: none;"/>
            </el-button-group>
          </div>
        </div>
      </div>
    </div>
    <div class="asideBar">
      <aside-bar @updateIsDay="getIsDay" @highlightSelection="highlightSelection" @removeHighlights="removeHighlights"
                 @removeSelectedHighlight="removeSelectedHighlight" @updateHighlightColor="updateHighlightColor"
                 @addAnnotation="addAnnotation" @saveSettings="handleSaveSettings">
      </aside-bar>
    </div>
  </div>
</template>

<style scoped>
.mainn {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}


.firstPage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: v-bind(setting.selectedColor);
  border-radius: 5px;
  height: auto;
  max-width: 800px;
  width: 800px;
}

.Annotation {
  margin: 10px 0 10px 20px;
  background-color: white !important;
  top: 1000px;
  width: 300px;
}

.content {
  width: 100%;
  max-width: 800px;
  background-color: v-bind(setting.selectedColor);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px;
}

.centered {
  max-width: 800px;
  margin: 0 auto 10px auto;
}

.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nameTitle {
  font-size: 30px;
  font-weight: normal;
  margin: 20px 10px 20px 10px;
}

.whole {
  display: flex;
  flex-direction: row;
}

.contentBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.body-annotation {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.informationTitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.authorInformation {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  border-radius: 5px;
}

.wordInformation {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-left: 150px;
  margin-right: 150px;
}

.left {
  flex: 1
}

.updateTime {
  display: flex;
  flex-direction: row;
  align-items: baseline;
}

.word {
  opacity: 0.5;
}

.asideBar {
  position: fixed;
  top: 0;
  right: 10px;
  width: 200px;
  padding: 10px;
  z-index: 1000;
}

.body {
  margin-left: 100px;
  margin-right: 100px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: v-bind(setting.selectedColor);
  border-radius: 5px;
  padding: 20px;
}

.bodyText {
  font-size: 20px;
  font-weight: normal;
  line-height: 30px;
  letter-spacing: 2px;
  margin: 10px 0 10px 0;
  font-family: v-bind(setting);
}

.button {
  margin: 10px;
}

.button-group {
  width: 100%;
  max-width: 800px;
  background-color: v-bind(setting.selectedColor);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.code {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
}

.highlight {
  background-color: yellow;
}

.annotation {
  background-color: rgba(255, 0, 0, 0.1);
  border-bottom: 2px solid red;
}

.annotation-line {
  border-left: 2px solid red;
  height: 100%;
}
</style>